<template lang="html">
  <div class="contain">
    <scroller style="top:44px;" :on-refresh="refresh" ref="my_scroller" height="94%" v-if="contracts.length !== 0">
      <card class="contract-box" v-for="contract in contracts" :key="contract.id">
        <p slot="header" class="contract-title">
          需签合同
        </p>
        <div slot="content" class="contract-content" v-on:click="sign(contract.contractId)">
          <p><span class="contract-detail">合同编号</span><span class="contract-id">{{contract.contractId}}</span></p>
          <p><span class="contract-detail">合同名称</span><span class="contract-name">{{contract.docTitle}}</span></p>
        </div>
      </card>
    </scroller>
    <divider v-else>暂时没有合同</divider>
  </div>
</template>

<script>
import { Card, Divider } from 'vux'
import { mapMutations } from 'vuex'
export default {
  created () {
    this.setSelectFooter(true)
    this.setFooter(true)
    this.setShowBack(false)
    this.setBackground(false)
    setTimeout(() => {
      // 调用main.js的公共函数
      this.getContract()
    }, 0)
  },
  computed: {
    contracts () {
      return this.$store.state.contracts
    }
  },
  methods: {
    sign (contractId) {
      this.$store.dispatch('sign', contractId).then((res) => {
        let result = res.data
        if (result.Code === 512) {
          // console.log(result.Url)
          window.location.href = result.Url
        } else if (result.Code === 405 || result.Code === 403) {
          this.setToast({
            show: true,
            type: '',
            text: result.Message
          })
          this.setLogin(true)
          this.setContract('')
        } else {
          this.setToast({
            show: true,
            type: '',
            text: result.Message
          })
        }
      })
    },
    refresh (done) {
      // 调用main.js的公共函数
      this.getContract(true)
      done()
    },
    ...mapMutations({
      setSelectFooter: 'setSelectFooter',
      setFooter: 'setFooter',
      setShowBack: 'setShowBack',
      setToast: 'setShowToast',
      setLogin: 'setPopup',
      setContract: 'setContract',
      setBackground: 'setBackground'
    })
  },
  components: {
    Card,
    Divider
  }
}
</script>

